<template>
 <div class="qererw">
   <!-- 头部固定栏 -->
   <headJump title='消息提醒' />
   <!-- 导航栏 -->
   <div class="grid">
       <div class="asd">
      <div class="item a"> <van-icon name="volume" /></div>
      <div class="swiz">交易物流</div>
       </div>
       <div class="asd">
         <div class="item b"> <van-icon name="chat" /></div>
         <div class="swiz">互动消息</div>
       </div>
       <div class="asd">
      <div class="item c">  <van-icon name="card" /></div>
      <div class="swiz">账户通知</div>
       </div>
     <div class="asd">
   <div class="item d">  <van-icon name="bell" /></div>
   <div class="swiz">服务通知</div>
     </div>
   </div>
   <!-- 通知 -->
   <div class="message">
   <div class="ttdfg"><van-icon name="bell" /></div>
    <div class="text">你好!,今天全场满10000000减100000000,你看了时仍生日歌生日歌1AF尔萨</div>
   </div>
   <!-- 消息栏 -->
   <div class="qazwsx">
       <div class="grid qert">
            <div class="asd">
            <div class="item e"> <van-icon name="gift" /></div>
             <span class="ertyh">
               <div class="uytr">优惠促销
                 <i>10:25</i>
               </div>
               <div class="yjfh">恭喜恭喜 获取 200元优惠券</div>
             </span>
            </div>
        </div>
          <div class="grid qert">
            <div class="asd">
            <div class="item e nn"><img src="https://tse1-mm.cn.bing.net/th/id/R-C.b5a683923a05212017dd587593421589?rik=iKdfKvg6XSnMWw&riu=http%3a%2f%2fimg3.redocn.com%2ftupian%2f20151125%2fhuaweilogo_5398990.jpg&ehk=dUfxgODt2pjR3UuRa9fA0U1Vu%2fXmmdSKPvf8vvRaJVk%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
             <span class="ertyh">
               <div class="uytr">京东自营旗舰店
                 <i>10:25</i>
               </div>
               <div class="yjfh">你购买的手机已经到货!!!</div>
             </span>
            </div>
        </div>
          <div class="grid qert">
            <div class="asd">
            <div class="item e kojniluh"> <img src="https://tse1-mm.cn.bing.net/th/id/R-C.1e4ac9178db231e5137d739dd0660c32?rik=WDqoIuY6man6ZQ&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f12%2f25%2f9b21c9ac9b.jpg&ehk=QPF8x1z1a4PfTIZrEGdyDYjgeDbySxkpF7NengeOrvQ%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
             <span class="ertyh">
               <div class="uytr">京东客服  <span>官方</span>
                 <i>10:25</i>
               </div>
               <div class="yjfh">这是你的专属福利!!!</div>
             </span>
            </div>
        </div>
        <van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  LOVE
</van-divider>
            <!-- 旗舰店 -->
   <div class="gsrtsejh7rtj">
     <div class="fxhdtjnfy">
       <van-icon name="clock-o" />
       两周前的消息
     </div>
   </div>
      <!-- //////////// -->
       <div class="grid qert">
            <div class="asd">
            <div class="item e kojniluh"> <img src="https://tse1-mm.cn.bing.net/th/id/R-C.b130c87b75a17febd7f7ff8934238178?rik=sVqYsZWZ9sOmVA&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221174024-912240027.jpg&ehk=TiyBsTIzWYVfwoi8BrKTPVZeble44GPuqAXOrQdC2Hk%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
             <span class="ertyh">
               <div class="uytr">太力京东自营旗舰店  
                   <i>2022/10/22</i>
               </div>
             
             </span>
            </div>
        </div>
           <div class="grid qert">
            <div class="asd">
            <div class="item e kojniluh"> <img src="https://tse1-mm.cn.bing.net/th/id/R-C.62ca79257a4d435dc9a71ef9ca121f60?rik=nSSV4UW84Isjhw&riu=http%3a%2f%2fwww.cnjiuzhi.com%2fUpimg%2f2014%2f7-8%2f8OQ7KA0157Q5008213926.jpg&ehk=oCz7bLW95IxwmLeD4pgQP%2fj8v0wzKXxlXSe31uEAPY4%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
             <span class="ertyh">
               <div class="uytr">爱国者京东自营旗舰店  
                 <i>2022/10/22</i>
               </div>
               <div class="yjfh">谢谢!!!</div>
             </span>
            </div>
        </div>
           <div class="grid qert">
            <div class="asd">
            <div class="item e kojniluh"> <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Vx9WfzmZ0n2TLZcArk-AYQHaHa?w=212&h=213&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></div>
             <span class="ertyh">
               <div class="uytr">汾酒京东旗舰店  
                 <i>2022/10/22</i>
               </div>
               <div class="yjfh">入会享受专属福利!!!</div>
             </span>
            </div>
        </div>
       </div>
 
 </div>  
</template>

<script>
export default {
  name:'messAge'
}
</script>

<style lang="less" scoped>
.qererw{
  background-color: rgb(241, 241, 241);
width: 100%;
height: 100%;
.grid{
  margin: 10px 0;
  display: flex;
 .item{
     width: 60px; 
     height: 60px;
     font-size: 30px;
     text-align: center;
     line-height: 60px;
     color: rgb(255, 255, 255);
     margin: 0 16.5px;
     border-radius: 50%;
 }
 .asd{
   .swiz{
      font-size: 15px;
      margin: 10px 15px;
     }
     .nn{
       background-color: floralwhite;
      img{
      width: 40px;
      margin-top: 10px;
    }
     }
     .kojniluh{
      background-color: floralwhite;
            img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
     }
 }
  .a{
    background-color: rgb(21, 255, 0);
  }
  .b{
    background-color: rgb(0, 17, 255);
  }
  .c{
    background-color: rgb(255, 136, 0);
  }
  .d{
    background-color: rgb(0, 255, 221);
  }
  .e{
    background-color: red;
  
  }
}
 .message{
    display: flex;
    .ttdfg{
      width: 28px;
      height: 28px;
      font-size: 15px;
      border-radius:50%;
      text-align: center;
      line-height: 30px;
      margin: 0 10px;
      color: rgb(255, 255, 255);
      background-color: rgb(128, 197, 182);
    }
    .text{
     color: rgb(107, 107, 107);
     width: 100%;
     height: 30px;
     font-size: 15px;
     line-height: 30px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow:ellipsis
    }
    }
    .qazwsx{
      margin: 20px 0;
      .qert{
       margin-left: -10px;
       .asd{
         display: flex;
        .ertyh{
          width: 270px;
          .uytr{
          display: flex;
          justify-content: space-between;
          font-size: 20px;
          font-weight: 700;
          span{
            font-size: 10px;
            margin-left: -100px;
            margin-top: 5px;
            color: rgb(214, 206, 206);
            background-color: red;
            height: 20px;
          }
          i{
            font-size: 10px;
            color: rgb(184, 184, 184);
          }
          }
          .yjfh{
              font-size: 15px;
              margin-top: 10px;
              color: rgb(184, 184, 184);
          }
        }
       }
    }
    }
 .gsrtsejh7rtj{
   .fxhdtjnfy{
     font-size:15px;
     color: rgb(170, 170, 170);
     margin-left: 10px;
     margin-top: 30px;
   }
 }
    }
</style>